<!-- #layout name=empty -->
<style>
  .menu-link {
    text-decoration: none;
    border-bottom: 1px dashed;
  }

  .menu-link:hover {
    text-decoration: none;
  }
  
</style>
<div id="menu-dialog" v-cloak>
  <div id="container">
    <table class="table tree table-hover">
      <thead>
        <tr>
          <th>Display text</th>
          <th>Link</th>
          <th class="table-action"></th>
          <th class="table-action"></th>
          <th class="table-action"></th>
          <th class="table-action"></th>
          <th class="table-action"></th>
          <th class="table-action"></th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(item,index) in menuItems">
          <tr :class="className(item)" :key="index">
            <td>
              <a
                v-if="isNotRoot(item)"
                @click="CUR_MENU = item; editDisplayText()"
                style="cursor: pointer"
                :data-url="item.UpdateText"
                :data-inline-edit="true"
                :data-id="item.id"
                >{{item.name}}</a
              >
              <span v-else @click="CUR_MENU = item">{{item.name}}</span>
            </td>
            <td>
              <a
                v-if="isNotRoot(item) && !item.urlEditing"
                style="cursor: pointer"
                @click="editUrl($event,item)"
                class="menu-link"
                >{{item.url}}</a
              >
              <div
                v-if="item.urlEditing"
                class="col-md-8"
                style="display: inline-flex"
              >
                <div class="editable-input">
                  <input
                    v-model="item.tempEditingUrl"
                    v-kb-typeahead="{source: pageList, defaultShow: true, items: 20 }"
                    type="text"
                    class="form-control input-sm"
                    placeholder="Select value from below or type a new url"
                  />
                </div>
                <div class="editable-buttons">
                  <a
                    @click="updateLinkUrl($event, item)"
                    class="btn btn-primary btn-sm editable-submit"
                    title="Save"
                    ><i class="glyphicon glyphicon-ok"></i
                  ></a>
                  <a
                    @click="cancelEditLink($event, item)"
                    class="btn btn-default btn-sm editable-cancel"
                    title="Cancel"
                    ><i class="glyphicon glyphicon-remove"></i
                  ></a>
                </div>
              </div>
            </td>
            <td>
              <a
                v-if="isNotRoot(item) && isMultiLangMenu"
                v-kb-tooltip:left="Kooboo.text.tooltip.menu.multilingual"
                @click="onShowMultiModal($event,item)"
                class="btn btn-xs btn-default"
                ><i class="fa fa-language"></i
              ></a>
            </td>
            <td>
              <a
                @click="onShowTemplateModal($event,item)"
                v-kb-tooltip:top="Kooboo.text.tooltip.menu.editTemplate"
                class="btn btn-xs btn-default"
                ><i class="fa fa-code"></i
              ></a>
            </td>
            <td>
              <a
                class="btn btn-xs btn-default"
                @click="onAddSubMenu($event,index,item)"
                v-kb-tooltip:top="Kooboo.text.tooltip.menu.addSubMenu"
                ><i class="fa fa-plus"></i
              ></a>
            </td>
            <td>
              <a
                v-if="isNotRoot(item)"
                @click="onRemoveSubMenu($event,index,item)"
                v-kb-tooltip:top="Kooboo.text.common.remove"
                class="btn btn-xs btn-default"
                ><i class="fa fa-minus"></i
              ></a>
            </td>
            <td>
              <a
                v-kb-tooltip:top="index === 1 ?'' : Kooboo.text.tooltip.moveUp"
                v-if="isNotRoot(item)"
                @click="menuMoveUp($event,index,item)"
                :disabled="index === 1"
                class="btn btn-xs btn-default"
                ><i class="fa fa-caret-up"></i
              ></a>
            </td>
            <td>
              <a
                v-kb-tooltip:left="index === menuItems.length -1 ?'' : Kooboo.text.tooltip.moveDown"
                v-if="isNotRoot(item)"
                @click="menuMoveDown($event,index,item)"
                :disabled="index === menuItems.length -1"
                class="btn btn-xs btn-default"
                ><i class="fa fa-caret-down"></i
              ></a>
            </td>
          </tr>
          <template v-if="item.addSubMenuing">
            <tr>
              <td>
                <div
                  class="col-md-8"
                  :class="{'has-error': !item.validate.name.valid}"
                >
                  <input
                    v-model="item.newSub.name"
                    @input="clearValidate($event,item)"
                    type="text"
                    class="form-control"
                    placeholder="Sub menu's name"
                  />
                </div>
              </td>
              <td>
                <div
                  class="col-md-8"
                  :class="{'has-error': !item.validate.url.valid}"
                >
                  <input
                    @input="clearValidate($event,item)"
                    v-kb-typeahead="{source: pageList, defaultShow: true, items: 20 }"
                    v-model="item.newSub.url"
                    type="text"
                    class="form-control row"
                    placeholder="Select value from below or type a new url"
                  />
                </div>
              </td>
              <td></td>
              <td></td>
              <td colspan="2" class="table-action">
                <a
                  @click="onSaveSubMenu($event,index,item)"
                  class="btn btn-sm blue"
                  >Save</a
                >
              </td>
              <td colspan="2" class="table-action">
                <a
                  @click="onCancelSubMenu($event,index,item)"
                  class="btn btn-sm btn-default"
                  >Cancel</a
                >
              </td>
            </tr>
          </template>
        </template>
      </tbody>
      <tfoot v-if="loading">
        <tr>
          <td colspan="100" class="text-center">
            <i class="fa fa-spinner fa-spin"></i>
            {{Kooboo.text.common.loading}}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
  <div
    class="modal fade"
    data-backdrop="static"
    v-kb-modal="showMultiLangModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="hideMultiLangModal" class="close"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Multilingual</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="form-group" v-for="item in multiNames">
              <label class="control-label col-md-3">{{item.key}}</label>
              <div class="col-md-9">
                <input
                  v-if="item.validate"
                  v-model="item.value"
                  v-kb-hint="item.validate.msg"
                  type="text"
                  class="form-control"
                />
                <input
                  v-else
                  v-model="item.value"
                  type="text"
                  class="form-control"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="onSaveMultiName" class="btn green">Save</button>
          <button @click="hideMultiLangModal" class="btn gray">Cancel</button>
        </div>
      </div>
    </div>
  </div>

  <div
    class="modal fade"
    data-backdrop="static"
    v-kb-modal="showTemplateModal"
  >
    <div class="modal-dialog  modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="onHideTemplateModal" class="close"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Template</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="control-label">Preview</label>
                <div class="border-gray">
                  <div style="height:460px">
                    <kb-code-editor
                      ref="editor1"
                      auto-size
                      :code.sync="previewCode"
                      lang="html"
                      :options="{ readOnly: true,lineNumbersMinChars:2,minimap:{enabled:false}}"
                    ></kb-code-editor>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div v-if="!menuWithNoChild" class="form-group">
                <label class="control-label">Sub item container</label>
                <div class="border-gray">
                  <div :style="{height:showCurrentTemplate?'80px':'230px'}">
                    <kb-code-editor
                      ref="editor2"
                      auto-size
                      :code.sync="subItemContainer"
                      lang="html"
                      :options="editorOptions"
                    ></kb-code-editor>
                  </div>
                </div>
                <div class="btn-group margin-top-10">
                  <a
                    v-for="help in codeHelperSubItem"
                    @click.stop="codeHelp($event,help)"
                    class="btn btn-xs btn-default"
                    >{{help.text}}</a
                  >
                </div>
              </div>
              <div v-if="!menuWithNoChild" class="form-group">
                <label class="control-label">Sub item template</label>
                <div class="border-gray">
                  <div :style="{height:showCurrentTemplate?'80px':'105px'}">
                    <kb-code-editor
                      ref="editor3"
                      auto-size
                      :code.sync="subItemTemplate"
                      lang="html"
                      :options="editorOptions"
                    ></kb-code-editor>
                  </div>
                </div>
                <div class="btn-group margin-top-10">
                  <a
                    v-for="help in subTmplCodeHelpers"
                    @click.stop="codeHelp($event,help)"
                    class="btn btn-xs btn-default"
                    >{{help.text}}</a
                  >
                </div>
              </div>
              <div v-show="showCurrentTemplate" class="form-group">
                <label class="control-label">Current template</label>
                <div class="border-gray">
                  <div style="height:80px">
                    <kb-code-editor
                      ref="editor4"
                      auto-size
                      :code.sync="currentTemplate"
                      lang="html"
                      :options="editorOptions"
                    ></kb-code-editor>
                  </div>
                </div>
                <div class="btn-group margin-top-10">
                  <a
                    v-for="help in tmplCodeHelpers"
                    @click.stop="codeHelp($event,help)"
                    class="btn btn-xs btn-default"
                    >{{help.text}}</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="onSaveTemplate" class="btn green">Save</button>
          <button @click="onHideTemplateModal" class="btn gray">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/lib/bootstrap3-typeahead.min.js",
      "/_Admin/Scripts/components/kbTypeahead.js",
      "/_Admin/Scripts/./lib/js-beautify/lib/beautify-html.js",
      "/_Admin/Scripts/components/kb-code-editor.js",
      "/_Admin/Scripts/lib/treegrid/jquery.treegrid.min.js",
      "/_Admin/Scripts/lib/x-editable/bootstrap-editable.min.js"
    ]);
    Kooboo.loadCSS([
      "/_Admin/Styles/bootstrap-editable/css/bootstrap-editable.css"
    ]);
  })();
</script>
<script src="/_Admin/View/Development/MenuDialog.js"></script>
